<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>Finalove-App-news</title>
		<link rel="stylesheet" href="../../resource/font/css/font-awesome.min.css">
		<link rel="stylesheet" href="../../resource/css/mint.css">
		<link rel="stylesheet" href="../../resource/css/style.css">
		<script src="../../resource/js/vue.js"></script>
		<script src="../../resource/js/mint.min.js"></script>
		<script src="../../resource/js/jquery.min.js"></script>
		<style type="text/css">
			body{
				background-color: #f2f2f2;
			}
			.ct-box{
				margin-top: 40px;
				width: 90%;
				margin-left: 5%;
			}
			#userHeadImg {
				margin-top: 30px;
				margin-bottom: 30px;
				border-radius: 15px;
				border: 2px solid #ebeef5;
				box-shadow: 0 4px 12px 0 rgba(0,0,0,0.1);
			}
			.saveBtn {
				margin-top:30px;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<mt-header fixed :title="title">
				<mt-button icon="back" slot="left" class="closeView"></mt-button>
			</mt-header>
			<div class="ct-box">
				<p class="text-center">
					<img id="userHeadImg" :src="friend.head" width="150px" height="150px" @click="showHead">
				</p>
				<mt-cell title="昵称">{{friend.name}}</mt-cell>
				<mt-cell title="账号">{{friend.user_name}}</mt-cell>
				<mt-cell title="邮箱">{{friend.email}}</mt-cell>
				<mt-field label="备注名称" v-model="remark_name" placeholder="设置备注名称">
					<mt-button size="small" type="primary" @click="editRemarkName">确定</mt-button>
				</mt-field>
				
				<mt-button size="large" type="primary" class="saveBtn" @click="goTo('../chat/chatroom.html','chatroom')">发送消息</mt-button>
				<mt-button size="large" type="danger" class="saveBtn" @click="delFriend">删除好友</mt-button>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var main = new Vue({
			el:"#main",
			data:{
				title:"好友详情",
				remark_name:"",
				friend:{
					id:"",
					name:"",
					head:"",
					user_name:"",
					email:""
				}
			},
			mounted:function() {
				this.init();
			},
			methods:{
				init() {
					// 获取配置
					$.getJSON('../../resource/config.json',function(res){
						main.api_prefix = res.api_prefix;
						main.api_key = res.api_key;
						main.app_version = res.app_version;
						main.app_version_check_url = res.app_version_check_url;
					});
					// loading
					document.addEventListener('plusready',function () {
						// 沉浸header
						plus.navigator.setFullscreen(true);
						// header返回btn
						document.querySelector(".closeView").addEventListener('click',function(){
							plus.webview.currentWebview().close();
						});
						// backbutton事件修改
						plus.key.addEventListener('backbutton', function() {
							plus.webview.currentWebview().close();
							return false;
						}, false);
						// 获取参数
						main.friend = {
							id:plus.webview.currentWebview().param.friend_id,
							name:plus.webview.currentWebview().param.friend_name,
							head:plus.webview.currentWebview().param.friend_head,
							user_name:"",
							email:""
						}
						main.title = main.friend.name;
						main.getFriendInfo();
					})
				},
				getFriendInfo() {
					var url = this.api_prefix + "friends/getFriendsInfoById";
					var param = {
						api_key:this.api_key,
						params:{
							friend_id:this.friend.id,
							belong_to:plus.storage.getItem("user_id")
						},
					}
					$.post(url,param,function(res) {
						main.friend.user_name = res.data.user_name;
						main.friend.email = res.data.email;
						main.remark_name = res.data.remark_name;
						main.friend.remark_name = res.data.remark_name;
					})
				},
				editRemarkName() {
					if(this.remark_name == null){
						this.remark_name = this.friend.name;
					}else if(this.remark_name.length < 1 || this.remark_name.length > 16){
						this.$toast({message:'备注名称的字符长度为1~16',position:'bottom',duration: 1000});
						return false;
					}
					var url = this.api_prefix + "friends/editRemarkName";
					var param = {
						api_key:this.api_key,
						params:{
							friend_id:this.friend.id,
							belong_to:plus.storage.getItem("user_id"),
							remark_name:this.remark_name
						},
					}
					$.post(url,param,function(res) {
						main.$toast({message:res.msg,position:'bottom',duration: 1000});
						if(res.code == 1){
							var friendDetails = plus.webview.currentWebview();
							var homePage = friendDetails.opener();
							homePage.evalJS("main.getFriendListData()");
						}
					})
				},
				delFriend() {
					this.$messagebox({
						title:"提示",
						message:"您真的要删除该好友吗？",
						confirmButtonText:"删除",
						cancelButtonText:"取消",
						showCancelButton:true,
						closeOnClickModal:false
					}).then(action => {
						if (action == 'confirm') {
							var url = this.api_prefix + "friends/delFriend";
							var param = {
								api_key:this.api_key,
								params:{
									visitor_id_0:this.friend.id,
									visitor_id_1:plus.storage.getItem("user_id"),
								},
							}
							$.post(url,param,function(res) {
								main.$toast({message:res.msg,position:'bottom',duration: 1000});
								if(res.code == 1){
									var friendDetails = plus.webview.currentWebview();
									var homePage = friendDetails.opener();
									homePage.evalJS("main.getFriendListData()");
									plus.webview.currentWebview().close();
								}
							});
						}
					}).catch(err => { 
						if (err == 'cancel') {
							// plus.runtime.quit();
						} 
					});
				},
				showHead() {
					var urls = [this.friend.head];
					plus.nativeUI.previewImage(urls);
				},
				goTo(url,viewId) {
					if (url) {
						plus.webview.close(viewId);
						var newView = plus.webview.create(url,viewId,{},{
							param:main.friend
						});
						plus.webview.show(newView,'slide-in-right',200);
					}else{
						this.$toast("地址错误")
					}
				},
			}
		})
	</script>
</html>
